'use client';

import { useWeatherStore } from '@/store/weatherStore';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';
import { getWeatherIcon } from '@/utils/helpers';

export default function DailyForecast() {
    const dailyForecast = useWeatherStore((state) => state.dailyForecast);

    return (
        <div className="bg-white/80 backdrop-blur-md rounded-2xl p-6 shadow-lg">
            <h3 className="text-lg font-medium mb-4">7天预报</h3>
            <div className="space-y-4">
                {dailyForecast.map((forecast, index) => (
                    <div
                        key={index}
                        className="flex items-center justify-between"
                    >
                        <span className="w-20">
                            {index === 0 ? '今天' : format(
                                new Date(forecast.date),
                                'E',
                                { locale: zhCN }
                            )}
                        </span>
                        <div className="flex-1 flex items-center justify-center">
                            {getWeatherIcon(forecast.weatherCode)}
                        </div>
                        <div className="w-24 text-right">
                            <span className="text-gray-900">
                                {Math.round(forecast.maxTemp)}°
                            </span>
                            <span className="text-gray-500 ml-2">
                                {Math.round(forecast.minTemp)}°
                            </span>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}